<template>
    <div>
        <!--查询条件-->
        <div class="searchBox">
            <Form label-position="left" :label-width="100" class="search-form">
                <Row :gutter="16">
                    <Col span="5">
                         <FormItem :label="`${$t('ledger.RelocationType')}:`">
                            <Select v-model="searchParams.ydlx" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of changesList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                      <FormItem :label="`${$t('common.ApprovalStatus')}:`">
                            <Select v-model="searchParams.authStatus" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of approveList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem :label="`${$t('ledger.TransactOutFactory')}:`">
                            <Select v-model="searchParams.oldBelongCompanyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem :label="`${$t('ledger.TransactInFactory')}:`">
                            <Select v-model="searchParams.newBelongCompanyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem :label="`${$t('ledger.SerialNo')}:`">
                            <Input type="text" v-model="searchParams.applyNo" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                        </FormItem>
                    </Col>
                    <Col span="5" align="center">
                        <Button type="primary" @click="changeNum()" v-if="checkBtnPermission.dmsMoveApplyGetDeviceMoveSpList">{{$t('common.Query')}}</Button>
                        <Button type="primary" style="margin-left: 10px;" @click="changeApproval()">审批</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
<!--            <span  class="creatBtnright" @click="handleAdd">-->
<!--                <span><Icon type="ios-add-circle-outline"/></span>-->
<!--                <span class="rightbtn">添加异动</span>-->
<!--            </span>-->
        </div>
        <div class="tableContent">
            <Table
                    style="margin-top: 10px"
                    row-key="id"
                    :columns="approveColumns"
                    :data="dataSource"
                    @on-selection-change="handleSelectionChange"
            >
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <!--设备详情-->
        <Modal :mask-closable="false"
                v-model="detailVisible"
                title="异动设备清单"
                :footer-hide="true"
                :width="1200"
        >
            <Table
                    :columns="detailColumns"
                    :data="detailDataSource"
            >
                <template slot-scope="{row}" slot="newOrgId">
                    <Cascader
                            :data="orgList"
                            :value="row.newOrg"
                            :transfer="true"
                            @on-change="handleCasChange($event, row)"
                    ></Cascader>
                </template>
            </Table>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "approveList",
        data() {
            return {
                total: this.approveTotal,
                pageNum: 1,
                pageSize: 10,
                detailVisible: false,
                delLoading: false,
                searchParams: {},
                checkBtnPermission: {},
                pageSizeOption: [10, 20, 30],
                approveList: [{id: 0, name: '全部'}, {id: 1, name: '待审批'}, {id: 2, name: '已通过'}, {id: 3, name: '未通过'}, {id: 4, name: '已撤销'}],
                changesList: [{id: 0, name: '全部'}, {id: 1, name: '转售'}, {id: 2, name: '调拨'}, {id: 3,name: '租用'}, {id: 4, name: '借用'}, {id: 7, name: '借用归还'}, {id: 5, name: '仅记录'}, {id: 6, name: '委外生产借用'}],
                approveColumns: [
                  {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                  },
                    {
                        title: '审批状态',
                        key: 'authStatus',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', params.row.authStatus == 1 ? '待审批' : params.row.authStatus == 2 ? '已通过' : params.row.authStatus == 3 ? '未通过' : '已撤销')
                        }
                    },
                    {
                        title: '异动类型',
                        key: 'ydlx',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', params.row.ydlx == 1 ? '转售' : params.row.ydlx == 2 ? '调拨' : params.row.ydlx == 3 ? '租用' : params.row.ydlx == 4 ? '借用' : params.row.ydlx == 5 ? '仅记录' : params.row.ydlx == 6 ? '委外生产借用' : '借用归还')
                        }
                    },
                    {
                        title: '异动单号',
                        key: 'applyNo',
                        align: 'center',
                        minWidth: 200,
                    },
                    // {
                    //     title: 'OA签核单号',
                    //     key: 'oaNo',
                    //     align: 'center',
                    //     minWidth: 120
                    // },
                    {
                        title: '异动数量',
                        key: 'moveNum',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('a',
                                {
                                    style: {
                                        color: 'blue',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleMoveDetail(params.row.id)
                                        }
                                    }
                                }, params.row.moveNum)
                        }
                    },
                    {
                        title: `${ this.$t('equipmentscrapped.ApplyBy') }`,
                        key: 'applyUserName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '调入设备管理员',
                        key: 'moveInAdminName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('equipmentscrapped.ApplyTime') }`,
                        key: 'createTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '审批时间',
                        key: 'updateTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '调出工厂名称',
                        key: 'oldBelongCompanyName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '调入工厂名称',
                        key: 'newBelongCompanyName',
                        align: 'center',
                        minWidth: 120
                    },
                    // {
                    //     title: '调出成本中心',
                    //     key: 'moveOutCostCenterName',
                    //     align: 'center',
                    //     minWidth: 120
                    // },
                    // {
                    //     title: '调入成本中心',
                    //     key: 'moveInCostCenterName',
                    //     align: 'center',
                    //     minWidth: 120
                    // },
                    {
                        title: '异动申请事由',
                        key: 'applyRemark',
                        align: 'center',
                        minWidth: 120
                    },
                ],
                dataSource: this.approveDataSource,
                detailColumns: [
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center',
                        // width: 120
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center',
                        // width: 120
                    },
                    {
                        title: '固定资产编号',
                        key: 'assetsNo',
                        align: 'center',
                        // width: 120
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'specification',
                        align: 'center',
                        // width: 120,
                    },
                    {
                        title: '当前功能位置',
                        key: 'oldPosition',
                        align: 'center',
                        // width: 120,
                    },
                    {
                        title: '异动后功能位置',
                        key: 'newOrgName',
                        align: 'center',
                        // width: 120,
                    },
                ],
                detailDataSource: [],
              selectionList:[]
            }
        },
        props: {
            factoryList: {
                type: Array,
                default: () => []
            },
            orgList: {
                type: Array,
                default: () => []
            },
            approveDataSource: {
                type: Array,
                default: () => []
            },
            approveTotal: {
                type: Number,
                default: () => 10
            }
        },
        created() {
            this.searchList()
        },
        watch: {
            approveDataSource(newValue) {
                this.dataSource = newValue
              this.dataSource.forEach(val=>{
                if (val.authStatus !== 1){
                  val._disabled = true
                }
              })
            },
            approveTotal(newValue) {
                this.total = newValue
            },
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="dmsMoveApplyGetDeviceMoveSpList"){
                    this.checkBtnPermission.dmsMoveApplyGetDeviceMoveSpList = true
                }
            }
        },
        methods: {
          //审批
          changeApproval(){
            if (!(this.selectionList && this.selectionList.length)){
              this.$Message.error('请勾选待审批项!')
              return
            }
            const ids = this.selectionList.map(val=>val.id)
            this.axios({
              method: 'post',
              url: '/dms/dmsMoveApply/deviceMoveApproval',
              data: {
                ids,
                status:2
              }
            }).then(res=>{
              if (res.code == 200){
                this.searchList();
              }
            })
          },
            handleSelectionChange(selection) {
            this.selectionList = selection
            },
            //异动数量详情
            handleMoveDetail(id) {
                this.axios({
                    method: 'post',
                    url: '/dms/dmsMoveApply/getDmsMoveDetail',
                    params: {
                        id
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.detailVisible = true
                        this.detailDataSource = res.data
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
            //分页
            changeNum() {
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val) {
                this.pageNum = val;
                this.searchList();
            },
            searchList() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const {length, last = length - 1} = arr
                        this.$set(params, key, arr[last])
                    } else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.axios({
                    method: 'get',
                    url: '/dms/dmsMoveApply/getDeviceMoveSpList',
                    params: params
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.dataSource = res.data.list
                      this.dataSource.forEach(val=>{
                        if (val.authStatus !== 1){
                          val._disabled = true
                        }
                      })
                        this.total = res.data.total
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
